<template>
  <div style="width:100%;margin-bottom:40px">
    <p class="h-header">热门歌单
      <span class="p-more">更多</span>
    </p>
    <div class="g-item">
      <div class="g-row" v-for="(item, index) in topData" :key=index 
        @click="$router.push({path:'/gathers', query:{gid:item.gid}})" 
        @mouseenter="itemEnter(index)"
        @mouseleave="itemLeave">
        <img :src="item.imageUrl" style="" />
        <p>{{item.mark}}</p>
        <i v-if="item.icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
import { getGathersService } from '@/api/music'

export default {
  name:"top-gather",
  components: {
    
  },
  data() {
    return {
      topData:[],
    };
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const resp = await getGathersService({limit:5, gtype:'G'})
      if (!resp || 0 !== resp.result) {
        this.errorMsg = resp.message
        return
      }

      this.topData = resp.data.map(item => {
        item.icon = false
        if (item.imgtype == "1") {
          item.imageUrl = "/mpi/gather/image?gid=" + item.gid
        } else {
          item.imageUrl = item.g_image
        }
          
        return {
          ...item
        }
      })
    },
    itemEnter(index) {
     this.topData.forEach((item, idx) => {
        if (+idx == +index) {
          item.icon = true
        } else {
          item.icon = false
        }
      })
    },
    itemLeave() {
      this.topData.forEach((item, idx) => {
        item.icon = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .h-header {
    text-align:left;
    font-size:24px;
    font-weight:600;
    margin-bottom:20px;
    line-height: 40px;
    .p-more {
      font-size:13px;
      cursor:pointer;
      float:right;
      margin-right:40px;
    }
    .p-more:hover {
      color:#409EFF; 
    }
  }

  .g-item {
    width:100%;
    display:flex;
    margin-bottom:20px;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    justify-content:space-between;
    
    .g-row {
      width:200px;
      height:230px;
      // margin-right:55px;
      // float:left;

      img {
        width:100%;
        height:200px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      i {
        width:50px;
        height:50px;
        display: block;
        position: relative;
        top:-170px;
        left:75px;

        background-repeat: no-repeat;
        background: url(~/static/button.png);
        background-repeat: no-repeat;
        background-position: -4px -4px;
      }

      p {
        text-align: center;
        margin:5px 0px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        width:200px;
        height:30px;
      }
    }

    .g-row:hover {
      color:#409EFF; 
    }
  }

</style>